<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4467418_o5q1ic90vel.css">
</head>
<body>
    <div class="wrap">
        <div class="header">
            <div class="title_tab">
                <div class="title">
                    <h1>
                        <a href="">
                            网易云音乐
                        </a>
                    </h1>
                </div>
                <ul>
                    <li>
                        <a href="">发现音乐</a>
                    </li>
                    <li>
                        <a href="">我的音乐</a>
                    </li>
                    <li>
                        <a href="">关注</a>
                    </li>
                    <li>
                        <a href="">商城</a>
                    </li>
                    <li>
                        <a href="">全民制作人</a>
                    </li>
                    <li>
                        <a href="">云推歌</a>
                    </li>
                    <li>
                        <a href="">下载客户端</a>
                    </li>
                </ul>
                <div class="search">
                    <div class="search_input">
                        <!-- <img src="" alt="搜索"> -->
                        <i class="iconfont icon-sousuo"></i>
                        <input type="text" placeholder="音乐/视频/电台/用户">
                    </div>
                </div>
                <div class="create">
                    <a href="" class="creator">创作者中心</a>
                </div>
                <div class="login">
                    <a href="">登录</a>
                </div>
            </div>
            <div class="list_tab">
                <div class="list_tab_box">
                    <ul>
                        <li><a href="">推荐</a></li>
                        <li><a href="">排行榜</a></li>
                        <li><a href="">歌单</a></li>
                        <li><a href="">主播电台</a></li>
                        <li><a href="">歌手</a></li>
                        <li><a href="">新碟上架</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="swiper">
                <div class="left">
                    <a href="" class="row"><</a>
                </div>
                <div class="swiper_item">
                    <img src="images/image01.jpeg" alt="">
                    <ul class="circle">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="download">
                    <!-- <a href="">下载客户端</a> -->
                    <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                </div>
                <div class="right">
                    <a href="" class="row">></a>
                </div>
        </div>
        <div class="main">
            <div class="list_music">
                <div class="hot">
                    <div class="topnav">
                        <div class="tab">
                            <a href="" class="tab_title">热门推荐</a>
                            <div class="tab_list">
                                <a>华语</a>
                                <a>流行</a>
                                <a>摇滚</a>
                                <a>民谣</a>
                                <a class="last_item">电子</a>
                            </div>
                        </div>
                        <div class="more">
                            <a href="">更多</a>
                            <p class="row">-></p>
                        </div>
                    </div>
                </div>
                <div class="new"></div>
                <div class="bill"></div>
            </div>
            <div class="sidebar">
                <div class="login"></div>
                <div class="singer"></div>
                <div class="popular"></div>
            </div>
        </div>
        <div class="backtop">
            <a href="">
                <span>^</span>
                <span>TOP</span>
            </a>
        </div>
        <div class="footer"></div>
        <div class="hand_player_all">
            <div class="hand_player">
                <div class="hand"></div>
                <div class="player">
                    <div class="prev">prev</div>
                    <div class="play-pause">play</div>
                    <div class="next">next</div>
                    <div class="song_title"></div>
                    <div class="play">
                        <!-- 进度条的最小值和最大值：确保进度条的 min 为 0，max 为 100，以确保百分比计算正确。 -->
                        <input type="range" id="progress-bar" min="0" max="100" value="0" class="progress-bar" />  <!-- 进度条 -->
                        <p class="progress-time">
                            <span class="nowtime">00:00</span>
                            <span>/</span>
                            <span class="alltime">00:00</span>
                        </p>
                    </div>
                    <div class="volume">
                        <div class="volume_box">
                            <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1" class="volume-bar" />  <!-- 音量条 -->
                        </div>
                        <div class="volume_btn">音量</div>
                    </div>
                    <div class="loop-toggle">Loop Off</div>  <!-- 循环播放按钮 -->
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
}
input {
    border: none;         /* 去除边框 */
    outline: none;        /* 去除获焦时的轮廓 */
    background: none;     /* 去除背景色 */
    box-shadow: none;     /* 去除阴影 */
    padding: 0;           /* 去除内边距 */
    margin: 0;            /* 去除外边距 */
    /* 可能还需要重置其他属性，如字体、颜色等 */
    font-family: inherit; /* 继承字体 */
    font-size: inherit;   /* 继承字体大小 */
    color: inherit;       /* 继承字体颜色 */
}

.wrap{
    width: 100%;
    height: 100%;
    background-color: rebeccapurple;
    position: relative;
    /* text-align: center; */
}
/* h:100px */
.wrap .header{
    position: relative;
    width: 100%;
    height: 100px;
    background-color: #242424;
}

/* 70px */
.header .title_tab{
    display: flex;
    /* width: 100%; */
    margin: 0 auto;
    width: 1140px;
    height: 70px;
    background-color: #fff;
}

.title_tab .title{
    width: 170px;
    height: 100%;
    background-color: green;
    text-align: center;
    /* align-items: center; */
    /* align-self: center; */
    line-height: 70px;
}

.title_tab .title h1{
    /* color: #fff; */
}

.title_tab .title h1 a{
    font-size: 25px;
    color: #fff;
}

.title_tab ul{
    display: flex;
    width: 630px;
    height: 100%;
    background-color: blue;
}

.title_tab ul li{
    display: block;
    width: 90px;
    height: 100%;
    background-color: pink;
    text-align: center;
    /* align-self: center; */
    line-height: 70px;
    color: #fff;
}

.title_tab ul li:hover {
    cursor: pointer;
    background-color: #666;
}

.title_tab ul li a{
    font-size: 16px;
}

.title_tab .search{
    width: 170px;
    height: 100%;
    background-color: yellow;
}

.search .search_input{
    display: flex;
    /* justify-content: start; */
    /* text-align: center; */
    margin: 20px auto;
    width: 150px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    border: 1px solid black;
    border-radius: 20px;
}

.search .search_input .icon-sousuo{
    /* text-align: center; */
    display: block;
    /* margin: 0 0.5vw; */
    margin-left: 3px;
    margin-right: 3px;
}

.search .search_input input{
    font-size: 12px;
}

.search .search_input input:focus::placeholder {
    color: transparent;  /* 点击时隐藏 placeholder*/
}

.title_tab .create{
    width: 120px;
    height: 100%;
    background-color: purple;
    /* line-height: 7vh; */
}

.title_tab .create .creator{
    display: block;
    margin: 20px auto;
    width: 90px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    background-color: #ccc;
    color: #666;
    border: 1px solid #fff;
    border-radius: 20px;
}

.title_tab .login{
    width: 50px;
    height: 100%;
    background-color: gold;
}

.title_tab .login a{
    display: block;
    margin: 15px auto;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    color: #666;
    font-size: 12px;
}

/* height: 30px; */
.header .list_tab{
    width: 100%;
    height: 30px;
    background-color: red;
    text-align: center;
}

.header .list_tab .list_tab_box{
    margin: 0 auto;
    width: 1140px;
    height: 100%;
    background-color: goldenrod;
}

.header .list_tab .list_tab_box ul{
    margin-left: 170px;
    display: flex;
    /* background-color: #fff; */
}

.header .list_tab .list_tab_box ul li{
    /* display: block;
    width: 100px;
    height: 100%; */
}

.header .list_tab .list_tab_box ul li a{
    display: block;
    /* 不用设置宽度，用字体本身将宽度撑开，然后用padding来变相控制盒子的大小，顺便调一下间距 */
    padding: 0 10px;
    /* width: 60px; */
    height: 20px;
    margin: 5px 20px;
    font-size: 15px;
    color: #fff;
}

.header .list_tab .list_tab_box ul li a:hover{
    background-color: #ccc;
    border-radius: 20px;
}


/* h:300px */
.wrap .swiper{
    display: flex;
    /* justify-content: center; */
    /* text-align: center; */
    /* padding-left: 320px; */
    margin: 0 auto;
    width: 1110px;
    height: 300px;
    background-color: skyblue;
}


.swiper .left{
    position: relative;
    width: 30px;
    height: 100%;
    background-color: grey;
}

.swiper .row{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 30px;
    color: #fff;
}

.swiper :hover .row{
    cursor: pointer;
    background-color: rgba(251, 248, 233, 0.5); /* 背景颜色透明度为50% */
}

.swiper .right{
    position: relative;
    width: 30px;
    height: 100%;
    background-color: grey;
}

/* item+download width: 1050px; */
.swiper .swiper_item{
    /* margin-left: 35vw; */
    position: relative;
    width: 800px;
    height: 100%;
    background-color: #fff;
    margin: 0 auto;
}

.swiper .swiper_item img{
    /* background-size: cover; */
    width: 800px;
    height: 100%;
}

.swiper .swiper_item img:hover{
    cursor: pointer;
}


.swiper .swiper_item .circle{
    position: absolute;
    bottom: 0;
    left:0;
    margin-left: 200px;
    display: flex;
}

.swiper .swiper_item .circle li{
    display: block;
    margin: 10px 20px;
    width: 10px;
    height: 10px;
    /* border: 1px solid #ccc; */
    opacity: 0.4;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
}

.swiper .swiper_item .circle li.active{
    width: 14px;
    height: 14px;
    background-color: red;
    opacity: 1;
}

.swiper .download{
    position: relative;
    width: 250px;
    height: 100%;
    background-color: #ccc;
    background-image: url("https://s2.music.126.net/style/web2/img/index/download.png?2f8a17dd3cc6c86596752dfa3337d7f4");
    /* background-size:cover; */
    background-size: 250px 370px;
    background-repeat: no-repeat;
    text-align: center;
}

.swiper .download a{
    display: block;
    /* width: 200px;
    height: 60px; */
    /* background-color: #fff; */
    text-align: center;
    /* line-height: 60px; */
}

.swiper .download p{
    position: absolute;
    bottom: 0;
    display: block;
    width: 250px;
    height: 40px;
    /* text-align: center; */
    margin: 0 auto;
    /* margin-top: 20px; */
    /* margin: 10px 0; */
    font-size: 12px;
    color: #666;
}

/* height: 1300px; */
.wrap .main{
    display: flex;
    /* margin-left: 350px; */
    margin: 0 auto;
    width: 1050px;
    height: 1300px;
}

.main .list_music{
    width: 800px;
    height: 1300px;
}

/* 400px */
.list_music .hot{
    width: 800px;
    height: 400px;
    background-color: greenyellow;
    margin: 0 auto;
}

.list_music .hot .topnav{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    padding-top: 20px;
    width: 720px;
    height: 35px;
    border-bottom: 2px solid red;
}

.list_music .hot .topnav .tab{
    display: flex;
}

.list_music .hot .topnav .tab_title{
    display: block;
    width: 100px;
    height: 100%;
    color: #242424;
    font-size: 20px;
    /* align-self: center; */
}

.list_music .hot .topnav .tab_list{
    display: flex;
    height: 100%;
    /* align-items: center; */
}

.list_music .hot .topnav .tab_list a{
    margin-top: 8px;
    margin-left: 10px;
    /* margin-right: 10px; */
    padding-right: 10px;
    display: block;
    /* width: 40px; */
    height: 13px;
    line-height: 13px;
    border-right: 1.5px solid black;
    font-size: 13px;
}

.list_music .hot .topnav .tab_list .last_item{
    border: none;
}

.hot .topnav .more{
    display: flex;
    margin-top: 6px;
    font-size: 14px;
}

.hot .topnav .more a{
    /* font-size: 14px; */
    margin-right: 5px;
    color: #666;
}

/* 300px */
.list_music .new{
    width: 800px;
    height: 300px;
    background-color: bisque;
    margin: 0 auto;
}

/* 600px */
.list_music .bill{
    width: 800px;
    height: 600px;
    background-color: gray;
    margin: 0 auto;
}

.main .sidebar{
    width: 250px;
    height: 1300px;
    background-color: green;
}

.sidebar .login{
    width: 100%;
    height: 100px;
    background-color: #ddd;
}

.sidebar .singer{
    width: 100%;
    height: 400px;
    background-color: #c3c3c3;
}

.sidebar .popular{
    width: 100%;
    height: 800px;
    background-color: pink;
}

.wrap .backtop{
    display: none;
    position: fixed;
    top: 75%;
    left: 50%;
    margin-left: 540px;
    /* transform: translate(-50%,-50%); */
    text-align: center;
    /* align-self: center; */
    width: 50px;
    height: 50px;
    /* line-height: 4vh; */
    font-size: 15px;
    background-color: powderblue;
}

.backtop a{
    display: flex;
    flex-direction: column;
}

/* 430px */
.wrap .footer{
    width:100%;
    height: 400px;
    background-color: #f2f2f2;
}

.wrap .hand_player_all{
    position: fixed;
    bottom: -50px;
    width: 100%;
    height: 70px;
}

.wrap .hand_player_all .hand_player{
    position: relative;
    width: 100%;
    height: 70px;
}

.wrap .hand_player_all .hand_player .hand{
    position: absolute;
    right: 15px;
    width: 100px;
    height: 20px;
    background-color: #c3c3c3;
}

.wrap .hand_player_all .hand_player .hand:hover{
    cursor: pointer;
}

.wrap .hand_player_all .hand_player .player{
    display: flex;
    position: absolute;
    bottom: 0;
    /* left和right为0使player有具体的边界，所以才能使margin生效 */
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 1050px;
    height: 50px;
    background-color: #fff;
    line-height: 50px;
    text-align: center;
}

.wrap .hand_player_all .hand_player .player .prev{
    width: 50px;
    height: 50px;
}

.wrap .hand_player_all .hand_player .player .prev:hover{
    cursor: pointer;
}

.wrap .hand_player_all .hand_player .player .play-pause{
    width: 50px;
    height: 50px;
}

.wrap .hand_player_all .hand_player .player .play-pause:hover{
    cursor: pointer;
}

.wrap .hand_player_all .hand_player .player .next{
    width: 50px;
    height: 50px;
}

.wrap .hand_player_all .hand_player .player .next:hover{
    cursor: pointer;
}

.wrap .hand_player_all .hand_player .player .song_title{
    min-width: 100px;
    height: 50px;
    background-color: #ddd;
}

.wrap .hand_player_all .hand_player .player .play{
    display: flex;
    width: 550px;
    height: 50px;
}

.wrap .hand_player_all .hand_player .player .play .progress-bar{
    width: 400px;
    height: 50px;
}

.wrap .hand_player_all .hand_player .player .play .progress-time{
    /* display: flex; */
    width: 150px;
    height: 50px;
    line-height: 50px;
}

.wrap .hand_player_all .hand_player .player .volume{
    position: relative;
    width: 50px;
    height: 50px;
}

.wrap .hand_player_all .hand_player .player .volume .volume_box{
    position: absolute;
    display: flex;
    align-items: center;
    width: 120px;
    height: 50px;
    background-color: green;
    transform: rotate(-90deg);
    transform-origin: top left;
    opacity: 0;
}

.wrap .hand_player_all .hand_player .player .volume .volume_box .volume-bar{
    margin: 0 auto;
    display: block;
    width: 100px;
    height: 20px;
}

.wrap .hand_player_all .hand_player .player .volume .volume_btn{
    width: 50px;
    height: 50px;
}

.wrap .hand_player_all .hand_player .player .volume .volume_btn:hover{
    cursor: pointer;
}


.wrap .hand_player_all .hand_player .player .loop-toggle{
    width: 100px;
    height: 50px;
}

.wrap .hand_player_all .hand_player .player .loop-toggle:hover{
    cursor: pointer;
}
</style>




<script>
    const backtop=document.querySelector('.backtop')
    // 窗口滚动事件：显示和隐藏按钮
    window.addEventListener("scroll",()=>{
        const scrollY=window.scrollY;//当前滚动位置
        const threshold=0;//触发显示的阀值
        if(scrollY>threshold){
            backtop.style.display="block"//显示按钮
        }else{
            backtop.style.display="none"
        }
    })
    // 点击事件：回到页面顶部
    backtop.addEventListener("click",(e)=>{
        e.preventDefault()// 阻止链接的默认行为（如页面刷新）
        window.scrollTo({
            top:0,
            behavior:"auto"
        })
    })

    var num=0
    let autoSlideInterval = 3000;  // 默认自动轮播间隔
    let autoSlideTimer;//自动轮播函数
    // 1.初始数据
    // 这是个对象数组
    const swiper_item_data=[
        {url:'images/image01.jpeg'},
        {url:'images/image02.jpeg'},
        {url:'images/image03.jpeg'},
        {url:'images/image04.jpeg'},
        {url:'images/image05.jpeg'},
        {url:'images/image06.jpeg'},
        {url:'images/image07.jpeg'},
        {url:'images/image08.jpeg'},
    ]

    // 轮播到下一项的函数
    function nextSlide(){

        num++
        num=num%8
        // 把上一个active给去除
        if(num==0){
            const liprev=document.querySelector(`.swiper_item .circle li:nth-child(${8})`)
            liprev.classList.remove('active')
        }else{
            const liprev=document.querySelector(`.swiper_item .circle li:nth-child(${num})`)
            liprev.classList.remove('active')
        }

        // 更换图片
        const pic=document.querySelector('.swiper_item img')
        pic.src=swiper_item_data[num].url

        // 小圆点的改变
        const linow=document.querySelector(`.swiper_item .circle li:nth-child(${num+1})`)
        linow.classList.add('active')
    }
    autoSlideTimer=setInterval(nextSlide,2000)
    
    // 右箭头
    const right_row=document.querySelector('.swiper .right .row')
    right_row.addEventListener("click",(e)=>{
        e.preventDefault()
        nextSlide()
    })
    right_row.addEventListener("mouseenter",()=>{
        clearInterval(autoSlideTimer)
        console.log(1);
    })
    right_row.addEventListener("mouseleave",()=>{
        autoSlideTimer=setInterval(nextSlide,2000)
        console.log(2);
    })

    // 返回上一个轮播图
    function prevSlide(){

        num--
        num=(num+8)%8

        // 把上一个active给去除
        if(num==7){
            const linext=document.querySelector(`.swiper_item .circle li:nth-child(${1})`)
            linext.classList.remove('active')
        }else{
            const linext=document.querySelector(`.swiper_item .circle li:nth-child(${num+2})`)
            linext.classList.remove('active')
        }

        // 更换图片
        const pic=document.querySelector('.swiper_item img')
        pic.src=swiper_item_data[num].url

        // 小圆点的改变
        const linow=document.querySelector(`.swiper_item .circle li:nth-child(${num+1})`)
        linow.classList.add('active')
        
    }

    // 左箭头
    const left_row=document.querySelector('.swiper .left .row')
    left_row.addEventListener("click",(e)=>{
        e.preventDefault()
        prevSlide()
    })
    left_row.addEventListener("mouseenter",()=>{
        clearInterval(autoSlideTimer)
        console.log(1);
    })
    left_row.addEventListener("mouseleave",()=>{
        autoSlideTimer=setInterval(nextSlide,2000)
        console.log(2);
    })

    // 获取所有 li 元素
    const circleItems = document.querySelectorAll('.swiper .swiper_item .circle li');


    // 为每个 li 元素添加点击事件处理程序
    circleItems.forEach((circleItem, index) => {
        circleItem.addEventListener("click", (event) => {

            clearInterval(autoSlideTimer)
            
            // 获取被点击的元素
            const clickedElement = event.target;

            // 找到被点击的元素在父容器中的索引
            const parent = clickedElement.parentNode;  // 父容器
            const clickedIndex = Array.from(parent.children).indexOf(clickedElement);  // 当前点击的索引

            // 把上一个active给去除
            const liprev=document.querySelector(`.swiper_item .circle .active`)
            liprev.classList.remove('active')


            // 更换图片
            const pic=document.querySelector('.swiper_item img')
            pic.src=swiper_item_data[clickedIndex].url

            // 小圆点的改变
            const linow=document.querySelector(`.swiper_item .circle li:nth-child(${clickedIndex+1})`)
            linow.classList.add('active')

            num=clickedIndex

            autoSlideTimer=setInterval(nextSlide,2000)

        });
    });

    // 锁不锁住
    let lock=false

    const hand=document.querySelector('.wrap .hand')
    const hand_player_all=document.querySelector('.wrap .hand_player_all')
    hand.addEventListener("mouseenter",()=>{
        hand_player_all.style.bottom=0
        hand_player_all.style.transition="bottom 0.1s"
    })

    hand_player_all.addEventListener("mouseleave",()=>{
        console.log(1);
        if(!lock) hand_player_all.style.bottom="-50px"
        hand_player_all.style.transition="bottom 0.5s"
    })

    hand.addEventListener("click",()=>{
        lock=!lock
        console.log(lock);
    })

    // 播放列表
    const playlist = [
            { title: "红豆", src: "http://music.163.com/song/media/outer/url?id=1411290362.mp3" },
            { title: "Song 2", src: "http://music.163.com/song/media/outer/url?id=447925342.mp3" },
            { title: "Fool For You", src: "http://music.163.com/song/media/outer/url?id=1817576399.mp3" }
        ];
    
    // 当前播放索引
    let currentSongIndex = 0;

    // 创建音频对象
    const audio = new Audio(playlist[currentSongIndex].src);  // 指定音频文件

    // 获取播放/暂停按钮
    const play_pause=document.querySelector('.hand_player .player .play-pause')


    // 播放/暂停事件处理
    play_pause.addEventListener("click",()=>{
        // true就是已经暂停
        if(audio.paused){
            audio.play()    //播放音频
            play_pause.innerText='play'
        }else{
            audio.pause()   //暂停音频
            play_pause.innerText='pause'
        }
    })

    // 上一首歌
    const prev_song=document.querySelector('.hand_player .player .prev')
    
    prev_song.addEventListener("click",()=>{
        currentSongIndex=(currentSongIndex-1+playlist.length)%playlist.length
        audio.src=playlist[currentSongIndex].src
        audio.load()
        audio.play()
    })

    // 上一首歌
    const next_song=document.querySelector('.hand_player .player .next')
    
    next_song.addEventListener("click",()=>{
        currentSongIndex=(currentSongIndex+1)%playlist.length
        audio.src=playlist[currentSongIndex].src
        audio.load()
        audio.play()
    })

    // 进度条
    const progressBar = document.getElementById("progress-bar");

    const nowtime=document.querySelector('.play .progress-time .nowtime')

    // 歌曲总时长
    const alltime=document.querySelector('.play .progress-time .alltime')

    // 将时间格式化的函数
    function formatTime(seconds) {
        const minutes = Math.floor(seconds / 60);
        seconds = Math.floor(seconds % 60);
        return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }

    // 显示歌曲名字
    const song_title = document.querySelector(".song_title");

    audio.addEventListener("loadedmetadata",()=>{
        // nowtime.innerHTML=formatTime(0)
        alltime.textContent=formatTime(audio.duration)
        song_title.textContent = playlist[currentSongIndex].title;  // 设置歌曲名字
    })

    // 同步进度条   歌曲播放的时间同步到进度条
    audio.addEventListener("timeupdate", () => {
        const currentTime = audio.currentTime;  // 当前播放时间
        const duration = audio.duration;  // 总时长
        if (!isNaN(duration)) {
            const progress = (currentTime / duration) * 100;  // 转换为百分比
            progressBar.value = progress;
        }
        nowtime.textContent=formatTime(currentTime)
    });

    // 进度条事件处理   进度条的时间同步到播放时间，用来通过播放条来更改时间
    progressBar.addEventListener("input", (e) => {
        const duration = audio.duration;
        if (!isNaN(duration)) {
            // input的value一般为0-100，用来表示进度
            const newTime = (e.target.value / 100) * duration;  // 计算新的播放时间
            audio.currentTime = newTime;
            nowtime.textContent=formatTime(newTime)
        }
    });

    // 音量控制
    const volumeBar = document.getElementById("volume-bar");
    volumeBar.addEventListener("input", (e) => {
        audio.volume = e.target.value;  // 调整音量
    })

    const volume_btn=document.querySelector('.volume .volume_btn')
    const volume_box=document.querySelector('.volume .volume_box')
    
    let up_down=false

    volume_btn.addEventListener("click",()=>{
        up_down=!up_down
        if(up_down){
            volume_box.style.opacity=1
        }else{
            volume_box.style.opacity=0
        }
    })

    // 循环播放
    const loopToggle = document.querySelector(".player .loop-toggle");
    loopToggle.addEventListener("click", () => {
        audio.loop = !audio.loop;  // 切换循环播放
        loopToggle.textContent = audio.loop ? "Loop On" : "Loop Off";  // 更新按钮文本
    });

</script>